<template>
    <div>
        <!-- 选项 -->
        <div class="songerHeader">
            <div class="songerHeaderTop">
                <div
                    class="topItem"
                    :class="topItemIndex == index ? 'active' : ''"
                    v-for="(topItem,index) in topItem"
                    :key="index"
                    @click="changeCurrent(index, 'top', topItem)"
                >{{ topItem }}</div>
            </div>
            <div class="songerHeaderBottom">
                <div
                    class="bottomItem"
                    :class="bottomItemIndex == index ? 'active' : ''"
                    v-for="(bottomItem,index) in bottomItem"
                    :key="bottomItem"
                    @click="changeCurrent(index)"
                >{{ bottomItem }}</div>
            </div>
        </div>
        <!-- 歌手图片 -->
        <div class="songerInfo">
            <!-- 大图 -->
            <div class="infoBox" v-for="(bigImgItem) in bigImgList" :key="bigImgItem.id">
                <div class="songImg">
                    <img :src="bigImgItem.picUrl" alt />
                </div>
                <div class="songDesc">{{ bigImgItem.name }}</div>
                <p>共{{ bigImgItem.musicSize }}首歌曲</p>
            </div>
            <!-- 小图 -->
            <div class="letterBox" v-for="(letterImgItem) in letterImgList" :key="letterImgItem.id">
                <div class="letterSongImg">
                    <img :src="letterImgItem.picUrl" alt />
                </div>
                <span>{{ letterImgItem.name }}</span>
            </div>
        </div>
        <div style="text-align: center;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
                @current-change="currentPage"
            ></el-pagination>
        </div>
        <div type="primary" v-loading.fullscreen.lock="fullscreenLoading" text="加载中..."></div>
    </div>
</template>
<script>
import { getArtistList } from '../../api/artist'
export default {

    name: 'Songer',
    data() {
        return {
            topItem: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q'],
            bottomItem: ['全部', '华语男', '华语女', '华语组合', '日韩男', '日韩女', '日韩组合', '欧美女', '欧美男', '欧美组合', '其他'],
            topItemIndex: 0,
            bottomItemIndex: 0,
            bigImgList: [],//存放歌手大图的数据
            letterImgList: [],//存放歌手小图的数据
            offset: 0,// 分页请求的当前页
            letter: -1, // 根据字母筛选
            type: -1,// 组合筛选--华语男/女
            fullscreenLoading: false//loading加载效果
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
        // 获取歌手页面信息数据
        async getArtistInfo(offset) {
            this.fullscreenLoading = true
            const res = await getArtistList({ type: this.type, area: -1, initial: this.letter, offset })
            this.bigImgList = res.artists.splice(0, 12)
            this.letterImgList = res.artists.splice(0)
            this.fullscreenLoading = false
        },
        // 选择搜索的歌手选项函数
        changeCurrent(index, top, item) {
            if (top) {
                this.topItemIndex = index
                this.letter = item.toLowerCase()
                this.getArtistInfo()
            } else {
                if (index == 0) {
                    if (this.type == -1) return
                    this.type = -1
                }
                if (this.type == index) {
                    return
                }
                this.bottomItemIndex = index
                this.type = index
                this.getArtistInfo()
            }
        },
        // 分页器函数
        currentPage(a) {
            this.offset = a * 8
            this.getArtistInfo(this.offset)
        }
    },
    mounted() {
        this.getArtistInfo(this.offset)
    }
}
</script>
<style scoped>
/* 选项区域 */
.songerHeader {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 0 auto;
    width: 1200px;
    height: 80px;
    font-size: 14px;
    color: #333;
}
.songerHeaderTop,
.songerHeaderBottom {
    display: flex;
}

.topItem {
    width: 26px;
    border-radius: 50%;
}
.bottomItem {
    width: 80px;
    border-radius: 20px;
    margin-right: 20px !important;
}
.topItem,
.bottomItem {
    height: 26px;
    margin-right: 25px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
}
.active {
    background-color: #ffe443;
    font-weight: bold;
}

/* 歌手信息区域 */
/* 大图 */
.songerInfo {
    margin: 50px auto 0 auto;
    width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.infoBox {
    width: 190px;
    height: 250px;
    margin-bottom: 10px;
}
.songImg {
    width: 190px;
    height: 190px;
}
.songImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.songDesc {
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 16px;
}
p {
    text-align: center;
    color: #999;
}
/* 小图 */
.letterBox {
    width: 200px;
    height: 45px;
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.letterSongImg {
    width: 38px;
    height: 38px;
    margin-right: 15px;
}
.letterSongImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.letterBox span {
    color: #333;
    font-size: 14px;
}
</style>
